<!-- 生产数据管理 -->
<template>
  <div class="productionDataManagement">
    <div class='operate card'>
      <div class='picker'>
        <el-date-picker style="width:150px" placeholder="选择日期时间" v-model="s_time" :editable='false' :clearable="false" :type='d_type' :format="v_type" :value-format='v_type' :picker-options="pickerOptions"></el-date-picker>
      </div>
      <div>
        <el-button type="" @click='t_button'>查询</el-button>
      </div>
      <div class='add'>
        <el-button type="primary" @click='t_add'>新增</el-button>
      </div>
    </div>
    <el-row class='card' :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <tb v-loading='table_loading' @tb_005_delete='tb_005_delete' @tb_005_editor='tb_005_editor' tableTitle='tb_005' :tableData='tableData'></tb>
        <pagination :total='page.total' :pageNum='page.pageNum ' @handleCurrentChange='handleCurrentChange' />
      </el-col>
    </el-row>
    <el-dialog :title="dialog_title" :visible.sync="is_dialog" width="730px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="80px" class="demo-ruleForm">
        <div class='form_row'>
          <el-form-item label="开始时间" prop="s_time">
            <el-date-picker style='width:220px' v-model="ruleForm.s_time" :editable='false' :clearable="false" type='datetime' format="yyyy-MM-dd HH:mm:ss" value-format='yyyy-MM-dd HH:mm:ss' placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="e_time" ref='e_time'>
            <el-date-picker style='width:220px' v-model="ruleForm.e_time" :editable='false' :clearable="false" type='datetime' format="yyyy-MM-dd HH:mm:ss" value-format='yyyy-MM-dd HH:mm:ss' placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车间" prop="chejian_value">
            <el-select v-model="ruleForm.chejian_value" @change="change(ruleForm.chejian_value,1)" style='width:220px' placeholder="请选择车间">
              <el-option v-for="item in ruleForm.chejian_data" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生产线" prop="shengchanxian_value">
            <el-select v-model="ruleForm.shengchanxian_value" @change="change(ruleForm.shengchanxian_value,2)" style='width:220px' placeholder="请选择生产线">
              <el-option v-for="item in ruleForm.shengchanxian_data" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班组" prop="banzu_value">
            <el-select v-model="ruleForm.banzu_value" @change="change(ruleForm.banzu_value,3)" style='width:220px' placeholder="请选择班组">
              <el-option v-for="item in ruleForm.banzu_data" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" prop="false">
            <el-input v-model="ruleForm.fuzeren" :disabled="true" style='width:220px'></el-input>
          </el-form-item>
          <el-form-item label="产品名称" prop="chanpin_value">
            <el-select v-model="ruleForm.chanpin_value" @change="change(ruleForm.chanpin_value,4)" style='width:220px' placeholder="请选择产品名称">
              <el-option v-for="item in ruleForm.chanpin_data" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="num">
            <el-input v-model="ruleForm.num" style='width:220px'>
            </el-input>
          </el-form-item>
        </div>
        <div class='dialog_footer'>
          <!-- <el-form-item> -->
          <el-button @click="resetForm('ruleForm',false)">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <!-- </el-form-item> -->
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import tb from '@/components/table'
import pagination from '@/components/pagination'
import './index.scss'
export default {
  components: {
    tb,
    pagination
  },
  watch: {
  },
  data() {
    var number = (rule, value, callback) => {
      if (!Number.isInteger(Number(value))) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    var s_e_time = (rule, value, callback) => {
      if (this.ruleForm.s_time && this.ruleForm.e_time) {
        if (rule.field === 's_time') {
          if (dayjs(this.ruleForm.s_time).valueOf() > dayjs(this.ruleForm.e_time).valueOf()) {
            callback(new Error('开始日期不能大于结束日期'))
          } else {
            callback()
            // this.$refs['formName'].clearValidate()
          }
        }
        if (rule.field === 'e_time') {
          if (dayjs(this.ruleForm.s_time).valueOf() > dayjs(this.ruleForm.e_time).valueOf()) {
            callback(new Error('结束日期不能小于开始日期'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    return {
      rules: {
        s_time: [
          { required: true, message: '请选择开始时间', trigger: 'change' },
          { validator: s_e_time, trigger: 'change' }
        ],
        e_time: [
          { required: true, message: '请选择结束时间', trigger: 'change' },
          { validator: s_e_time, trigger: 'change' }
        ],
        chejian_value: [
          { required: true, message: '请选择车间', trigger: 'change' },
        ],
        shengchanxian_value: [
          { required: true, message: '请选择生产线', trigger: 'change' },
        ],
        banzu_value: [
          { required: true, message: '请选择班组', trigger: 'change' },
        ],
        fuzeren: [
          { required: true, message: '请选择负责人', trigger: 'change' },
        ],
        chanpin_value: [
          { required: true, message: '请选择产品名称', trigger: 'change' },
        ],
        num: [
          { required: true, message: '请输入数量', trigger: 'change' },
          { validator: number, trigger: 'change' }

        ],
      },
      ruleForm: {
        s_time: '',
        e_time: '',
        chejian_value: '',
        chejian_data: [],
        shengchanxian_value: '',
        shengchanxian_data: [],
        banzu_value: '',
        banzu_data: [],
        fuzeren: '',
        fuzeren_value: '',
        chanpin_value: '',
        chanpin_data: [],
        num: '',
        id: ''
      },
      is_dialog: false,
      dialog_title: '',
      tableData: [],
      table_loading: true,
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      // 初始开始时间
      s_time: "",
      // 初始日期格式
      v_type: "yyyy-MM-dd",
      // 初始显示类型
      d_type: "date",
      // 日   月  年 
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
    }
  },
  computed: {
  },
  watch: {},
  mounted() {
  },
  created() {
    this.getRespPageList(1)
  },
  methods: {
    getRespPageList(pagenum) {
      this.$axios.post(this.Eelec + '/web/productData/getRespPageList', {
        'pageNum': pagenum,
        'pageSize': this.page.pageSize,
        'time': this.s_time,
        "custId": sessionStorage.getItem("custId")
      }).then((res) => {
        this.table_loading = false
        if (res.data.code === 200) {
          if (pagenum === 1) {
            this.page.pageNum = 1
          }
          if (res.data.data.data.length) {
            this.page.total = res.data.data.totalCount
            this.tableData = res.data.data.data
            this.tableData.forEach((item, i) => {
              item.endDate = dayjs(item.endDate).format('YYYY-MM-DD')
              item.startDate = dayjs(item.startDate).format('YYYY-MM-DD')
            })
          } else {
            this.tableData = []
            this.page = {
              pageSize: 10,
              pageNum: 1,
              total: 0
            }
          }
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    t_add() {
      this.is_dialog = true
      this.dialog_title = '新增生产数据'
      this.ruleForm.s_time = ''
      this.ruleForm.e_time = ''
      this.ruleForm.num = ''
      this.ruleForm.chejian_data = []
      this.ruleForm.chejian_value = ''
      this.ruleForm.shengchanxian_value = ''
      this.ruleForm.fuzeren_value = ''
      this.ruleForm.chanpin_value = ''
      this.ruleForm.banzu_value = ''
      this.ruleForm.shengchanxian_data = []
      this.ruleForm.fuzeren = ''
      this.ruleForm.chanpin_data = []
      this.ruleForm.banzu_data = []
      this.select_change('add', 1)
      this.select_change('add', 4)
      this.$nextTick(() => {
        this.resetForm('ruleForm', true)
      })
    },
    tb_005_editor(p) {
      this.is_dialog = true
      this.dialog_title = '编辑生产数据'
      console.log(p)
      this.ruleForm.id = p.id
      this.ruleForm.s_time = p.startDate + ' 00:00:00'
      this.ruleForm.e_time = p.endDate + ' 00:00:00'
      this.ruleForm.num = p.number
      this.select_change('editor', 1, p)
      this.select_change('editor', 2, p, p.workshopId)
      this.select_change('editor', 3, p, p.lineId)
      this.select_change('editor', 4, p)
      // this.resetForm('ruleForm',true)
    },
    change(p, n) {
      if (n === 1) {
        this.ruleForm.shengchanxian_data = []
        this.ruleForm.shengchanxian_value = ''
        this.ruleForm.banzu_data = []
        this.ruleForm.banzu_value = ''
        this.ruleForm.fuzeren = ''
        this.select_change('add', 2, p, p)
      }
      else if (n === 2) {
        this.ruleForm.banzu_data = []
        this.ruleForm.banzu_value = ''
        this.ruleForm.fuzeren = ''
        this.select_change('add', 3, p, p)
      } else if (n === 3) {
        // this.select_change('add', 3, p, p)
        this.ruleForm.banzu_data.forEach((item, index) => {
          if (item.id === p) {
            this.ruleForm.fuzeren = item.monitor
            this.ruleForm.fuzeren_value = item.lineId
          }
        })

      }
    },
    select_change(e_d, n, p, id) {
      if (n === 1) {
        var fd = new FormData()
        fd.append("custId", sessionStorage.getItem("custId"))
        this.$axios.post(this.Eelec + '/web/productData/getWorkshopByCustId', fd).then((res) => {
          if (res.data.code == 200) {
            this.ruleForm.chejian_data = res.data.data
            if (e_d === 'editor') {
              this.ruleForm.chejian_value = p.workshopId
            }
          }
        }).catch((err) => {
          console.log(err)
        })
      } else if (n === 2) {
        var fd = new FormData()
        fd.append("workshopId", id)
        this.$axios.post(this.Eelec + '/web/productData/getLineByWorkshopId', fd).then((res) => {
          if (res.data.code == 200) {
            this.ruleForm.shengchanxian_data = res.data.data
            if (e_d === 'editor') {
              this.ruleForm.shengchanxian_value = p.lineId
            }
          }
        }).catch((err) => {
          console.log(err)
        })
      } else if (n === 3) {
        var fd = new FormData()
        fd.append("lineId", id)
        this.$axios.post(this.Eelec + '/web/productData/getTeamInfoByLineId', fd).then((res) => {
          if (res.data.code == 200) {
            this.ruleForm.banzu_data = res.data.data
            if (e_d === 'editor') {
              this.ruleForm.banzu_value = p.teamId
              this.ruleForm.banzu_data.forEach((item, index) => {
                if (item.id === this.ruleForm.banzu_value) {
                  this.ruleForm.fuzeren = item.monitor
                  this.ruleForm.fuzeren_value = item.lineId
                }
              })
            }
          }
        }).catch((err) => {
          console.log(err)
        })
      } else if (n === 4) {
        var fd = new FormData()
        fd.append("custId", sessionStorage.getItem("custId"))
        this.$axios.post(this.Eelec + '/web/productData/getProductInfoByLineId', fd).then((res) => {
          if (res.data.code == 200) {
            this.ruleForm.chanpin_data = res.data.data
            if (e_d === 'editor') {
              this.ruleForm.chanpin_value = p.productId
            }
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    tb_005_delete(p) {
      this.ruleForm.id = p.id
      this.$confirm('您确定删除此生产数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        var fd = new FormData()
        fd.append("id", this.ruleForm.id)
        this.$axios.post(this.Eelec + '/web/productData/delete', fd).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getRespPageList(1)
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      console.log(p)
    },
    update(type) {
      this.$axios.post(this.Eelec + '/web/productData/' + type, {
        "custId": sessionStorage.getItem("custId"),
        "id": this.ruleForm.id,
        "startDate": this.ruleForm.s_time,
        "endDate": this.ruleForm.e_time,
        "lineId": this.ruleForm.shengchanxian_value,
        "number": this.ruleForm.num,
        "productId": this.ruleForm.chanpin_value,
        "teamId": this.ruleForm.banzu_value,
        "workshopId": this.ruleForm.chejian_value
      }).then((res) => {
        if (res.data.code == 200) {
          this.is_dialog = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getRespPageList(1)
        } else {
          this.is_dialog = false
          this.$message.error(res.data.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 点击查询
    t_button() {
      this.table_loading = true
      this.getRespPageList(1)
    },
    handleCurrentChange(v) {
      this.table_loading = true
      this.page.pageNum = v
      this.getRespPageList(v)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialog_title === '新增生产数据') {
            this.update('insert')
          } else {
            this.update('update')
          }
          console.log(this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName, is) {
      this.$refs[formName].resetFields()
      this.is_dialog = is
    },
  }
}
</script>
 <style scoped lang='scss'>
</style>
